<template>
	<view class="details">
		<!-- <view class="details-top">
			<view class="tit">{{detils.title}}</view>
		</view> -->
		<view class="details-con" v-if="content">
			<rich-text :nodes="content"></rich-text>
			<!-- <u-parse :content="content" v-if="content"></u-parse> -->
		</view>
		<view class="empty-box" v-if="!content">
			<u-empty  mode="data" marginTop="300rpx" text="暂无内容"></u-empty>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['userToken','userInfo']), // vuex获取用户数据
		},
		data() {
			return {
				title:'',
				content:'',
				detils:null,
			};
		},
		onLoad(option) {
			this.id = option.id || '1';
			this.getDetils();
		},
		onShow(){
			
		},
		methods: {
			getDetils(){
				uni.showLoading({
					title:"正在加载"
				})
				this.$H.get('api/article/getInfo', {id:this.id}).then(res => {
					uni.hideLoading();
					let content = res.content.replace(/<img([\s\w"-=\/\.:;]+)/ig,'<img style="width: 100%;display:block" $1');
					this.content = content;
					this.title = res.title;
					this.detils = res;
					uni.setNavigationBarTitle({
						title: res.title
					})
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.details{
		padding:  24rpx;
		.details-top{
			.tit{
				font-size: 40rpx;
				padding: 20rpx 0;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #2D2929;
			}
			.dec{
				font-size: 24rpx;
				color: #999999;
				.see{
					display: inline-block;
					margin-left: 44rpx;
				}
			}
		}
		.details-con{
			// padding: 30rpx 0 ;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: #343434;
		}
	}
</style>
